<script setup lang="ts">

import {QueryType} from "../../../types/DataTypes.ts";
import {ref,watch} from "vue";
const emit = defineEmits<{
  selectionChange: [QueryType]
}>()

const queryType = ref<QueryType>(QueryType.FlightQuery);
watch(queryType,(newType) =>{
  emit('selectionChange',newType);
})
</script>

<template>
  <div class="query-type-selector">
    <el-radio-group v-model="queryType">
      <el-radio
          v-for="qt in QueryType"
          :key="qt.valueOf()"
          :label="qt.valueOf()"
          size="large"
      >
        {{ qt.valueOf() }}
      </el-radio>
    </el-radio-group>
  </div>
</template>

<style scoped>
.query-type-selector {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.query-type-hint {
  margin: 10px 0 0;
  font-size: 14px;
  color: royalblue;
}
</style>